import React from 'react';
import Search from '@/components/search';
import homeStyles from './index.less';

export default class IndexPage extends React.Component {
  constructor(props: any) {
    super(props);
    this.state = { hitokoto: '' };
    this.getHitokoto = this.getHitokoto.bind(this);
  }

  getHitokoto = () => {
    fetch('https://v1.hitokoto.cn')
      .then((response) => response.json())
      .then((data) => {
        this.setState({ hitokoto: data.hitokoto });
      })
      .catch(console.error);
  };

  componentDidMount() {
    this.getHitokoto();
  }

  render() {
    const { hitokoto }: any = this.state;
    return (
      <div className={homeStyles.home_container}>
        <Search />
        <h4 className={homeStyles.hitokoto}>{hitokoto}</h4>
      </div>
    );
  }
}
